﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>SFC系统2020年度报告</title>
    <meta name="theme-color" content="#f00">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="apple-mobile-web-app-title" content="我的SFC系统报告2020">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no">
    <link rel="stylesheet" href="css/jquery_fullpages.css">
    <link rel="stylesheet" href="css/main.css">
      <!-- lib -->
      <script src="json/josnData.js"></script>
      <script src="js/jquery.min.js"></script>
      <script src="js/jquery_fullpage.js"></script>
      <script src="js/echarts.min.js"></script>
      <!-- components -->
      <script src="js/App.js"></script>
      <!-- json -->
      <script src="js/index.js"></script>
      <!-- main -->
      <script lang="javascript">
          jQuery(document).ready(function ($) {
              var app = new App();
              $('#app').fullpage({
                  onLeave: function (index, nextIndex, direction) {
                      // $('.title1').eq(0).addClass('titlehActive');
                      // $('.userMess').eq(0).addClass('userActive');
                      $('.lookBtn').eq(0).addClass('lookBtnActive');
                  },
                  afterLoad: function (anchorLink, index) {
                      if(index==2 || index==1) {
                          // $('.title1').eq(0).removeClass('titlehActive');
                          // $('.userMess').eq(0).removeClass('userActive');
                          $('.lookBtn').eq(0).removeClass('lookBtnActive');
                          setTimeout(() => {
                              // $('.title1').eq(0).addClass('titlehActive');
                              // $('.userMess').eq(0).addClass('userActive');
                              $('.lookBtn').eq(0).addClass('lookBtnActive');
                           })
                      }
                  },
                  sectionColor: ['yellow', 'green', 'blue', 'purple'],
                  fadingEffect: true,
              });
              /*前往正文页面=>立即查看*/
              $('#app .page-1 .button').click(function () {
                  $.fn.fullpage.moveSectionDown();
                  if (window.screen.availWidth <= 768) {
                      TimeOut = setInterval(function () {
                          $.fn.fullpage.moveSectionDown();
                      }, 6000);
                      $('section').on('touchstart',function(e){
                          clearInterval(TimeOut)
                      })
                  } else {
                      $('section').hover(function () {
                          clearInterval(TimeOut)
                      }, function () {
                          TimeOut = setInterval(function () {
                              $.fn.fullpage.moveSectionDown();
                          }, 6000);
                      })
                  }
              });
              /*回顶部=>重温TA的2017*/
              function topFunction() {
                  document.body.scrollTop = 0;
                  document.documentElement.scrollTop = 0;
              }
              $('.backBtn').click(function () {
                  $.fn.fullpage.moveTo(1, 0);
                  document.location.reload();
              });
          });
      </script>
</head>

<body>
    <div id="app">
        <input hidden="hidden" id="mm" />
        <section class="section page page-1 page-home">
            <div class="bg-back"></div>
            <div class="bg-white"></div>
            <div class="title-wrapper">
                <h1 class="title title-1"></h1>
                <h1 class="title title-2"></h1>
            </div>
            <div class="title_header title1">
                <h1>SFC 年度使用报告</h1>
                <h2>—— 2020 ——</h2>
            </div>
            <div class="userMess">
                <h3 class="user">130612</h3>
                <div><img src="images/1.png" alt=""></div>
              </div>
            <a class="button lookBtn">
                <span>立即<br>查看</span>
            </a>
            <div class="card"></div>
            <div class="stars">
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
                <span></span><span></span>
            </div>
        </section>
        <section class="section page page-2">
            <div class="night night-1"></div>
            <div class="night night-2"></div>
            <div class="stars">
                <span class="star star-1"></span>
                <span class="star star-2"></span>
                <span class="star star-3"></span>
                <span class="star star-4"></span>
            </div>
            <div class="meteors">
                <span class="meteor meteor-1"></span>
                <span class="meteor meteor-2"></span>
            </div>
            <div class="moon-wrapper"></div>
            <div class="moon">
                <div class="swing">
                    <div class="man"></div>
                </div>
            </div>
            <div class="building building-1"></div>
            <div class="content">
                <div class="con_box content1">
                    <!-- <p class="para paraTitle" style="margin-bottom: 30px;">SFC系统</p> -->
                    <p class="para" style="margin-bottom: 20px;">Hello,<span class="fs-18 fc-red user"></span></p>
                    <p class="para" style="margin-bottom: 20px;"><span class="fs-18 fc-red" id="firstDay">2020年2月11日</span>与你初次见面</p>
                    <p class="para mt-10" style="margin-bottom: 20px;">2020年你第一次执行的是</p>
                    <p class="para mt-10" style="margin-bottom: 20px;"><span class="fs-18 fc-red LoginName">XXX</span>操作</p>
                    <p class="para mt-10" style="margin-bottom: 20px;">SFC系统陪你走过了<span class="fs-18 fc-red  totalDay">XXX</span>天</p>
                    <p class="para mt-10" style="margin-top: 20px;">最好的时光，是有你在。</p>
                </div>
            </div>
        </section>
        <section class="section page page-4">
            <div class="wave1 wave1-1">
                <div class="ripple"></div>
            </div>
            <div class="wave1 wave1-2"></div>
            <div class="wave2 wave2-1"></div>
            <div class="wave2 wave2-2"></div>
            <div class="circle"></div>
            <div class="man-wrapper">
                <div class="splash"></div>
                <div class="man"></div>
            </div>
            <div class="thisYear">
                <div class="content">
                    <p class="para mt-10">这一年里我们一共相处了<span class="fs-18 fc-red totalHour">XXXX</span>小时</p>
                    <p class="para mt-10" style="margin-bottom: 40px;">你在SFC系统执行了<span class="fs-18 fc-red totalOperate">XXXX</span>次操作</p>
                    <p class="para mt-10">在SFC的世界，遇见你真好</p>
                    <p class="para mt-10">相信有SFC系统的日子里</p>
                    <p class="para mt-10">每一次工作都很愉快！</p>
                </div>
            </div>
        </section>
        <section class="section page page-4">
            <div class="wave1 wave1-1">
                <div class="ripple"></div>
            </div>
            <div class="wave1 wave1-2"></div>
            <div class="wave2 wave2-1"></div>
            <div class="wave2 wave2-2"></div>
            <div class="circle"></div>
            <div class="man-wrapper">
                <div class="splash"></div>
                <div class="man"></div>
            </div>
            <div class="thisYear">
                <div class="content">
                    <p class="para mt-10">这一年里你最爱的是<span class="fs-18 fc-red myFava">XXXX</span></p>
                    <p class="para mt-10" style="margin-bottom: 40px;">你们之间有<span class="fs-18 fc-red myFavaClick">XXXX</span>次美丽的邂逅</p>
                    <p class="para mt-10">你热爱<span class="fs-18 fc-red myFava">XXXX</span></p>
                    <p class="para mt-10">这里有着你许多足迹</p>
                    <p class="para mt-10">我想<span class="fs-18 fc-red myFava">XXXX</span>一定和你有着某种特殊关系</p>
                </div>
            </div>
        </section>
        <section class="section page page-4">
            <div class="wave1 wave1-1">
                <div class="ripple"></div>
            </div>
            <div class="wave1 wave1-2"></div>
            <div class="wave2 wave2-1"></div>
            <div class="wave2 wave2-2"></div>
            <div class="circle"></div>
            <div class="man-wrapper">
                <div class="splash"></div>
                <div class="man"></div>
            </div>
            <div class="thisYear">
                <div class="content">
                    <!-- <p class="para mt-10">这一年里</p> -->
                    <p class="para mt-10">你对SFC系统的偏爱超过<span class="fs-18 fc-red userProportion">XXXX</span>的用户</p>
                    <p class="para mt-10" style="margin-bottom: 40px;">排名为<span class="fs-18 fc-red userRank"></span></p>
                    <p class="para mt-10">相信有SFC系统的日子里</p>
                    <p class="para mt-10">每一天都会愉悦和充实！</p>
                </div>
            </div>
        </section>
        <section class="section page page-4">
            <div class="wave1 wave1-1">
                <div class="ripple"></div>
            </div>
            <div class="wave1 wave1-2"></div>
            <div class="wave2 wave2-1"></div>
            <div class="wave2 wave2-2"></div>
            <div class="circle"></div>
            <div class="man-wrapper">
                <div class="splash"></div>
                <div class="man"></div>
            </div>
            <div class="thisYear">
                <div class="content">
                    <!-- <p class="para mt-10">这一年里</p> -->
                    <p class="para mt-10"><span class="fs-18 fc-red early">XXXXXXXX</span>是特别的一天</p>
                    <p class="para mt-10"><span class="fs-18 fc-red early2">XXXXXXXX</span>是我们最早的相遇时刻</p>
                    <p class="para mt-10" style="margin-bottom: 40px;">元气满满的一天从<span class="fs-18 fc-red earlyName">XXXXXXXX操作</span>开始</p>
                    <p class="para mt-10">你知道吗</p>
                    <p class="para mt-10">SFC系统的每一天因为有你的陪伴而更加精彩！</p>
                </div>
            </div>
        </section>
        <section class="section page page-4">
            <div class="wave1 wave1-1">
                <div class="ripple"></div>
            </div>
            <div class="wave1 wave1-2"></div>
            <div class="wave2 wave2-1"></div>
            <div class="wave2 wave2-2"></div>
            <div class="circle"></div>
            <div class="man-wrapper">
                <div class="splash"></div>
                <div class="man"></div>
            </div>
            <div class="thisYear">
                <div class="content">
                    <!-- <p class="para mt-10">这一年里</p> -->
                    <p class="para mt-10"><span class="fs-18 fc-red last">XXXXXXXX</span>是同样特别的一天</p>
                    <p class="para mt-10"><span class="fs-18 fc-red last2">XXXXXXXX</span>是我们最晚的相遇时刻</p>
                    <p class="para mt-10" style="margin-bottom: 40px;">此刻你还在执行<span class="fs-18 fc-red lastName">XXXX</span>操作</p>
                    <p class="para mt-10">因为你知道无论何时</p>
                    <p class="para mt-10">只要你需要我都会在！</p>
                </div>
            </div>
        </section>
        <section class="section page page-4">
            <div class="wave1 wave1-1">
                <div class="ripple"></div>
            </div>
            <div class="wave1 wave1-2"></div>
            <div class="wave2 wave2-1"></div>
            <div class="wave2 wave2-2"></div>
            <div class="circle"></div>
            <div class="man-wrapper">
                <div class="splash"></div>
                <div class="man"></div>
            </div>
            <div class="thisYear">
                <div class="content">
                    <p class="para mt-10"><span class="fs-18 fc-red lastDay">XXXXXXXX</span>是我们最后一次见面</p>
                    <p class="para mt-10" style="margin-bottom: 40px;"><span class="fs-18 fc-red lastDay2">XXXXXXXX</span>我将铭记于心</p>
                    <p class="para mt-10">2020年感谢你的陪伴，2021年我想更懂你</p>
                    <p class="para mt-10">今后的时光让SFC系统陪你一同走过</p>
                </div>
            </div>
        </section>
        <section class="section page page-3 ">
            <div>
                <div class="rock rock-2">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-1">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-3">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-4">
                    <div class="rock-inner"></div>
                </div>
                <div class="alwaysIn"><p class="para mt-10 toptext">你经常在<span class="fs-18 fc-red timeMost">中午</span>浏览SFC系统</p></div>
            <div id="main" class="echartMain"></div>
            </div>
        </section>
        <section class="section page page-3 ">
            <div>
                <div class="rock rock-2">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-1">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-3">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-4">
                    <div class="rock-inner"></div>
                </div>
                <div class="mountain-wrapper">
                    <div class="mountain">
                        <h3 id="mostTitle"></h3>
                        <div>
                            <span class="title" id="mostBrowse"></span>
                        </div>
                        <div>
                            <ul class="list" id="mostList"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section page page-3  page-14">
            <div>
                <div class="rock rock-2">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-1">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-3">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-4">
                    <div class="rock-inner"></div>
                </div>
                <div class="info">
                    <!-- <div class="avatar">
                        <img class="image" src="images/avatar.jpg" aleft="avatar">
                    </div> -->
                    <!-- <div class="title user"></div> -->
                    <div class="toptext">年度Top10</div>
                </div>
                <div class="content">
                    <ol id="summary"></ol>
                </div>
              <!-- <button class="button backBtn">返回报告</button> -->
                <!-- <div class="light-2"></div>  -->
            </div>
        </section>
        <section class="section NewPages">
            <div>
                <div class="rock rock-2">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-1">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-3">
                    <div class="rock-inner"></div>
                </div>
                <div class="rock rock-4">
                    <div class="rock-inner"></div>
                </div>
                <div class="otherPage">
                    <div class="wishBox">
                        <div class="theWish">
                            <img src="images/avatar.jpg" alt="">
                            <p class="user">130612</p>
                            <p>立下的新年FLAG</p>
                        </div>
                        <div class="getText"></div>
                        <button class="backBtn">返回报告</button>
                    </div>
                </div>
                <div class="head">
                    <div class="top">
                        <span>新年FLAG</span>
                    </div>
                
                    <div class="bottom c">
                        <div class="active wishClass">
                            <ul>
                                <li>身体健康，平安顺遂</li>
                                <li>涨工资！！！</li>
                                <li>不再失眠</li>
                                <li>发际线不再上移</li>
                                <li>冬暖夏凉，生活如意</li>
                                <li>奖金拿到手软</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>多开展部门活动</li>
                                <li>暴瘦十斤！！！</li>
                                <li>改善伙食，天天有肉吃</li>
                                <li>住宿条件提高</li>
                                <li>技术水平飞升</li>
                                <li>能去干部餐厅用餐</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>新年红包拿到手软</li>
                                <li>来一场说走就走的旅游</li>
                                <li>劳模是我的</li>
                                <li>学一门新技术</li>
                                <li>升本插本</li>
                                <li>考个技术证</li>
                            </ul>
                        </div>
                    </div>
                    <!-- <div class="getText"></div> -->
                    <div class="changeText">
                        <a href="javascript:;" class="r">换一批</a>
                    </div>
                    <div class="newBtnBox">
                        <button class="newBtn newBtn1 newSbmit">提交</button>
                        <button class="newBtn newBtn2 backBtn">返回报告</button>
                    </div>
                </div>
                <!-- <div class="light-2"></div>  -->
            </div>
        </section>
    </div>
</body>
</html>